<template>
	<view class="home">
    <view style="width: 100%;height: 38px;background-color: #FFFFFF;">
      <view class="orderText" @click="gotoOrder">查看订单</view>
    </view>
    <view style="width: 100%;" v-for="(item,index) in smartData" :key="index" v-show="smartData.length > 0">
      <u-card :title="organization + area" sub-title="故障上报" :thumb="thumb" style="margin-top: 2%;" @head-click="feedback">
        <view slot="body">
          <view class="chargingCabinetItemBox u-body-item">
            <view class="itemBoxHeader">
              <image src="../../static/cabinet-select.png" v-show="item.value"></image>
              <image src="../../static/cabinet.png" v-show="!item.value"></image>
              <text style="margin-left: 10px;color: #4387CA;">{{item.name}}</text>
            </view>
            <view class="flex-row itemBoxContent">
              <u-icon name="map" color="#55aa7f" size="28"></u-icon>
              <text style="margin-left: 5px;color: #55aa7f;">地点 : {{location}}</text>
            </view>
            <view>
              <u-button size="mini" type="primary" style="float: right;" :disabled="item.value" @click="control(item.addr, true)">一键开柜</u-button>
              <u-button size="mini" type="error" style="float: right;margin-right: 10px;" :disabled="!item.value" @click="control(item.addr, false)">一键关柜</u-button>
            </view>
            <view class="cabinetStatus" :style="item.value ? 'color: #aa0000' : 'color: #00aa7f'">{{ item.value ? '使用中' : '空闲中'}}</view>
          </view>
        </view>
      </u-card>
    </view>
    <view v-show="smartData.length == 0" style="background-color: #FFFFFF;width: 100%;height: 100vh;margin-top: 3%;">
      <image src="../../static/chargeOpen.png" style="width: 200px;height: 200px;margin-top: 30%;"></image>
      <view style="margin-top: 10px;color: #00557f;font-weight: 600;">暂无可使用的充电仓哦 ~ </view>
    </view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import {mapState} from 'vuex' //引入mapState
  import { getSmart, cabinetControl } from "@/common/js/api/api.js";
	export default {
		onLoad(option) {
      this.$bus.$emit('refresh','refresh');
      var cabinetData = JSON.parse(option.cabinetData);
      var regAddr = [];
      this.organization = cabinetData.organization;
      this.uuid = cabinetData.uuid;
      this.area = cabinetData.area;
      this.location = cabinetData.location;
      this.smartData = cabinetData.smartModules;
      this.smartData.forEach(item => {
        item.state.forEach(item1 => {
          var obj = {};
          obj.addr = item1.qrCode.uuid;
          obj.name = item1.qrCode.name;
          obj.value = item1.open;
          regAddr.push(obj);
        })
      })
      this.smartData = regAddr.sort((item1, item2) => item1.name.localeCompare(item2.name));
      setInterval( () => {
        this.getSmartData();
      }, 5000);
      this.$bus.$on('isOpen', (data)=>{
        this.isOpen = data;
      })
		},
    data() {
      return {
        isOpen: false,
        avatarUrlIcon: '../../../static/logo.png',
        thumb: '../../static/myMsg.png',
        organization: '',
        area: '',
        location: '',
        smartData: [],
        uuid: ''
      }
    },
		methods: {
      getSmartData() {
        getSmart().then((res) => {
          res = res.data;
          var tempData = [];
          res.forEach(item => {
            if(item.address.startsWith(this.uuid)) {
              tempData.push(item);
            }
          });
          var regAddr = [];
          tempData.forEach(item => {
            item.state.forEach(item1 => {
              var obj = {};
              obj.addr = item1.qrCode.uuid;
              obj.name = item1.qrCode.name;
              obj.value = item1.open;
              regAddr.push(obj);
            })
          })
          this.smartData = regAddr.sort((item1, item2) => item1.name.localeCompare(item2.name));
        }).catch((err) => {
          console.log(err)
        });
      },
      control(params, isOpen) {
        let obj = {};
        obj.cabinet = params;
        obj.open = isOpen;
        cabinetControl(obj).then((res) => {
          uni.showToast({
            title: isOpen ? '开仓成功' : '关仓成功',
            duration: 2000
          });
        }).catch((err) => {
          uni.showToast({
            title: err.response.data.message,
            icon: "error",
            duration: 2000
          });
        })
      },
      feedback() {
        uni.navigateTo({
        	url: '../feedBack/feedBack'
        })
      },
      gotoOrder() {
        uni.navigateTo({
          url: '../myOrder/myOrder'
        })
      },
      beforeDestroy() {
        this.$bus.$off('refresh') //解绑navMenu事件
      }
		}
	}
</script>

<style>
	@import url("../../common/css/home.css");
</style>
